<script setup>
import { ref } from 'vue'
import { useFoodStore } from '../stores/food.js'

const foodStore = useFoodStore()
const form = ref({
    name: '',
    imageUrl: '',
    category: 'breakfast'
})

const categories = [
    { value: 'breakfast', label: '早餐' },
    { value: 'lunch', label: '午餐' },
    { value: 'dinner', label: '晚餐' }
]

const handleSubmit = () => {
    foodStore.addFood({
        name: form.value.name,
        imageUrl: form.value.imageUrl,
        category: form.value.category
    })

    form.value = {
        name: '',
        imageUrl: '',
        category: 'breakfast'
    }
}
</script>

<template>
    <div class="manage">
        <el-card class="add-form">
            <h2>添加新食物</h2>
            <el-form :model="form" label-width="100px">
                <el-form-item label="食物名称">
                    <el-input v-model="form.name" />
                </el-form-item>

                <el-form-item label="图片链接">
                    <el-input v-model="form.imageUrl" />
                </el-form-item>

                <el-form-item label="分类">
                    <el-select v-model="form.category">
                        <el-option v-for="item in categories" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="handleSubmit">添加</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <el-card class="food-list">
            <h2>已添加的食物</h2>
            <el-table :data="foodStore.foods">
                <el-table-column prop="name" label="名称" />
                <el-table-column prop="category" label="分类">
                    <template #default="{ row }">
                        {{ categories.find(c => c.value === row.category)?.label }}
                    </template>
                </el-table-column>
                <el-table-column label="图片">
                    <template #default="{ row }">
                        <img :src="row.imageUrl" style="height: 50px;">
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<style scoped>
.manage {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.add-form {
    margin-bottom: 20px;
}

.food-list {
    margin-top: 20px;
}
</style>